<!-- 富文本 -->
<template>
	<view class="rich-wrap"
		v-if="detail">
		<view class="head"></view>
		<view class="main">
			<view class="u-flex u-row-between">
				<view class="title">{{detail.title}}</view>
				<view class="status"
					v-if="detail.status == 'nostart'">
					{{detail.sign_status_text}}
				</view>
				<view class="status"
					v-else-if="detail.status == 'ended' && detail.sign_status == 'signed'">{{detail.receive_status_text}}</view>
				<view class="status"
					:class="{'disabled':detail.status == 'ended'}"
					v-else>{{detail.status_text}}</view>
			</view>
			<view class="u-flex u-m-t-30 "
				v-if="detail.status != 'nostart' && detail.sign_status == 'signed'">
				<view class="u-flex-1">
					<progress :percent="detail.percent"
						:style="{width:'100%'}"
						active-color="#ed6328"></progress>
				</view>
				<view class="u-m-l-30">{{detail.complete_order_count}}/{{detail.order_count}}单</view>
			</view>
			<view class="u-flex u-m-t-30">
				<view style="color: #f26161;">奖金：</view>
				<view class="price">{{detail.reward}}元</view>
			</view>
			<view class="u-flex u-m-t-30">
				<view>报名费：</view>
				<view>{{detail.fee}}元</view>
			</view>
			<view class="u-m-t-30"
				style="font-size: 28rpx;"> 活动时间：{{detail.starttime_text}} 至 {{detail.endtime_text}}
			</view>
			<view class="u-m-t-30"
				style="font-size: 28rpx;"> 报名时间：{{detail.sign_starttime_text}} 至 {{detail.sign_endtime_text}}
			</view>
			<view class="tags">
				<view v-for="(tag,tagIndex) in detail.tags_list"
					:key="tagIndex"
					class="tag">{{tag}}</view>
			</view>
			<view class="content"
				v-if="detail.richtext && detail.richtext.content">
				<u-parse :html="detail.richtext.content"></u-parse>
			</view>
		</view>
		<view style="height: 150rpx;"
			v-if="detail.sign_status == 'ing' || (detail.status == 'ended' && detail.receive_status == 0)"></view>
		<view class="cu-bar foot bg-white"
			v-if="detail.sign_status == 'ing'">
			<view style="padding-top: 10rpx;width: 100%;">
				<button class="u-reset-button save-btn"
					@tap="onSubmit"
					:disabled="isFormEnd">确认报名 (¥{{detail.fee}})</button>
			</view>
		</view>
		<view class="cu-bar foot bg-white"
			v-if="detail.status == 'ended' && detail.receive_status == 0">
			<view style="padding-top: 10rpx;width: 100%;">
				<button class="u-reset-button save-btn"
					@tap="receiveReward"
					:disabled="isFormEnd">领取奖金</button>
			</view>
		</view>
	</view>
</template>
<script>
	import Auth from '@/shopro/permission/index.js';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				detail: '',
				hasPostBtn: true,
				isFormEnd: false
			};
		},
		computed: {
			...mapGetters(['agentInfo'])
		},
		onLoad() {
			this.$Route.query.id && this.getDetail();
		},
		methods: {
			// 领取奖励
			receiveReward(index){
				let that = this
				uni.showLoading()
				that.$http('activity.receiveReward', {
					activity_id: that.detail.id
				}).then(res => {
					uni.hideLoading()
					if (res.code === 1) {
						Object.assign(that.detail,res.data)
					}
				});
			},
			// 提交
			onSubmit() {
				let that = this;
				if (!this.agentInfo || this.agentInfo.status != 'normal' || this.agentInfo.info_status != 1) {
					this.$Router.push("/pages/app/commission/apply")
					return false
				}
				that.isFormEnd = true;
				that.$http('activity.apply', {
					activity_id: this.detail.id
				}, '报名中...').then(res => {
					that.isFormEnd = false;
					if (res.code === 1) {
						if (res.data.pay_status == 0) {
							that.$Router.push({
								path: `/pages/order/payment/method`,
								query: {
									orderId: res.data.id,
									orderType: 'activity'
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								success: () => {
									that.getDetail();
								}
							});
						}
					}
				});
			},
			getDetail() {
				this.$http('activity.detail', {
					id: this.$Route.query.id
				}).then(res => {
					if (res.code === 1) {
						this.detail = res.data;
						uni.setNavigationBarTitle({
							title: res.data.title
						});
					}
				});
			}
		}
	};
</script>
<style lang="scss"
	scoped>
	.head {
		background: #e6d19a;
		padding: 60rpx;
	}

	.main {
		position: relative;
		z-index: 1;
		margin-top: -20rpx;
		background: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: 900;
		}

		.status {
			display: inline-block;
			margin-right: 16rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			background: #d8e6fa;
			color: #0c7b92;
			font-size: 30rpx;

			&.disabled {
				background: #f4f4f4;
				color: #cccccc;
			}
		}

		.price {
			font-size: 40rpx;
			font-weight: 900;
			color: #f26161;

			text {
				font-size: 80%;
			}
		}

		.tags {
			margin-top: 30rpx;

			.tag {
				display: inline-block;
				background: #dae9cc;
				color: #5db867;
				margin-right: 16rpx;
				padding: 2rpx 6rpx;
				font-size: 26rpx;
				border-radius: 10rpx;
			}
		}

		.content {
			border-top: 1px solid #f7f7f7;
			padding: 30rpx 0;
			margin-top: 30rpx;
		}
	}

	.save-btn {
		width: 690rpx;
		line-height: 86rpx;
		background: #ffc327;
		box-shadow: 0px 3px 5px 1px rgba(229, 199, 165, 0.34);
		border-radius: 43rpx;
		font-weight: 500;
		color: #ffffff;
		margin: 30rpx auto;
		display: block;
	}

	.cu-bar.foot {
		z-index: 10;
	}
</style>